<template>
  <el-dialog
    title="忘记密码"
    :visible.sync="ishowpassword"
    width="30%"
    :show-close="false"
    :close-on-click-modal="false"
    top="20vh"
  >
    <i class="iconfont closeicon" @click="closepassword">&#xe6ce;</i>
    <div class="passwordcontent">
      <div class="forget-pwd-con">
        <div class="tips">
          <i class="el-icon-warning icon-tips"></i>
          请先验证手机号，再设置新密码
          <br />
          密码设置说明：密码长度为9-16位，且至少包含数字、字母、下划线中的2个，字母区分大小写。
        </div>
      </div>
      <div class="forget-form">
        <el-form
          ref="forgetform"
          :model="forgetform"
          label-width="80px"
          :rules="rules"
        >
          <el-form-item label="手机号" prop="tel">
            <el-input
              v-model="forgetform.tel"
              size="large"
              placeholder="请输入手机号"
              @input="changephone"
            ></el-input>
          </el-form-item>
          <el-form-item label="验证码" prop="smsCode">
            <div class="phoneCodearea">
              <el-input
                v-model="forgetform.smsCode"
                size="large"
                :placeholder="placeholderTetx"
                class="codeinput"
              ></el-input>
              <el-button
                type="primary"
                size="large"
                :disabled="isdisable"
                @click="sendCode"
              >
                {{ sendCodetext }}{{ senCodetime }}
              </el-button>
            </div>
          </el-form-item>
          <el-form-item label="新密码" prop="newPassword">
            <el-input
              show-password
              v-model="forgetform.newPassword"
              size="large"
              placeholder="请输入新密码"
            ></el-input>
          </el-form-item>
          <el-form-item label="确认密码" prop="rePassword">
            <el-input
              show-password
              v-model="forgetform.rePassword"
              size="large"
              placeholder="确认密码"
            ></el-input>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="closepassword" size="medium">取 消</el-button>
      <el-button type="primary" @click="passwordsub" size="medium">
        确 定
      </el-button>
    </span>
  </el-dialog>
</template>

<script>
import { isPhone } from '@/utils/validate'
import {forgetpassword,getCode} from '@/api/common'
export default {
  data() {
    return {
       placeholderTetx:'请输入验证码',
      //验证码计时器
      secodeTimer: null,
      //是否禁用发送验证码
      isdisable: true,
      //验证码倒计时
      senCodetime: '',
      sendCodetext: '发送验证码',
      forgetform: {
        //手机号
        tel: '',
        //验证码
        smsCode: '',
        //新密码
        newPassword: '',
        //确认密码
        rePassword: '',
        //sms短信验证
      smsSign:'',
      },
      //表单验证
      rules: {
        tel: [
          {
            required: true,
            message: '请输入手机号',
            trigger: 'change',
          },
        ],
        smsCode: [
          {
            required: true,
            message: '请输入验证码',
            trigger: 'change',
          },
        ],
        newPassword: [
          {
            required: true,
            message: '请输入密码',
            trigger: 'change',
          },
        ],
        rePassword: [
          {
            required: true,
            message: '请输入密码',
            trigger: 'change',
          },
        ],
      },
    }
  },
  props: {
    //是否显示忘记密码弹窗
    ishowpassword: {
      type: Boolean,
      default: false,
    },
  },
  methods: {
    //发送验证码
    async sendCode() {
      let params  = {
        tel:this.forgetform.tel
      }
      let data =  await getCode(params)
      if(data.code=='0000'){
        this.forgetform.smsSign = data.data.smsSign
        this.placeholderTetx = '请输入编号为'+this.forgetform.smsSign+'验证码'
        clearInterval(this.secodeTimer)
      this.sendCodetext = '已发送'
      //验证码计时器60秒
      this.senCodetime = 60
      this.isdisable = true
      this.secodeTimer = setInterval(() => {
        if (this.senCodetime == 0) {
          this.senCodetime = ''
          this.sendCodetext = '发送验证码'
          this.placeholderTetx='请输入验证码'
          this.isdisable = false
          return
        } else {
          this.senCodetime--
        }
      }, 1000)
        
      }
      
    },
    //监听手机号输入事件
    changephone(val) {
      let result = isPhone(val)
      //手机号正确 就取消禁用
      if (result) {
        this.isdisable = false
      }
    },
    //关闭忘记密码
    closepassword() {
      this.$refs['forgetform'].resetFields()
      //清空定时器
          clearInterval(this.secodeTimer)
          this.senCodetime = ''
          this.sendCodetext = '发送验证码'
          this.isdisable = true
      //向父组件传值
      this.$emit('closepassword')
    },
    //提交修改
    passwordsub() {
      
      this.$refs['forgetform'].validate(async (valid) => {
        if (!valid) return
        // TODO 提交表单
        let data = await forgetpassword(this.forgetform)
        if(data.code=='0000'){
          this.$message({
            type: 'success',
            message: '找回密码成功，请重新登录!'
          });
          this.$refs['forgetform'].resetFields()
          this.$emit('forgetpasswordok')
        }
      })
    },
  },
  mounted() {

  },
}
</script>

<style scoped lang='scss'>
.closeicon {
  position: absolute;
  right: 20px;
  top: 15px;
  cursor: pointer;
  font-size: 24px;
  color: hsla(0, 0%, 40%, 0.6784313725490196);
  &:hover {
    color: $base-color-default;
  }
}
.forget-pwd-con .tips {
  background: #e6f7ff;
  border-radius: 2px;
  border: 1px solid #91d5ff;
  margin: 0 0 25px;
  font-size: 13px;
  color: rgba(0, 0, 0, 0.65);
  line-height: 22px;
  padding: 10px 30px;
  i {
    color: #1890ff;
  }
}
.phoneCodearea {
  display: flex;
  .codeinput {
    margin-right: 10px;
  }
}
</style>